<template>
  <view class="container">
    <view class="form-container">
      <!-- <view class="form-header">
        <text class="form-title">加盟五湖四友</text>
      </view> -->
      <form @submit.prevent="handleSubmit">
        <view class="form-item">
          <text class="form-label">1.您的预算是多少？</text>
          <input class="form-input" type="text" v-model="data.budget" placeholder="请输入预算" />
        </view>
        <view class="form-item">
          <text class="form-label">2.是否体验过我们的产品？</text>
          <radio-group class="radio-group" v-model="data.visited"  @change="visitedChange">
            <radio class="radio-item" :value="1" :checked="data.visited === 1"  color="#F87b1e">是</radio>
            <radio class="radio-item" :value="0" :checked="data.visited === 0"  color="#F87b1e">否</radio>
            <!-- 其他业务选项... -->
          </radio-group>
        </view>
        <view class="form-item">
          <text class="form-label">3.希望开展哪些业务？</text>
          <radio-group class="radio-group" v-model="data.businessType" @change="businessTypeChange">
            <radio class="radio-item" :value="1" :checked="1 === data.businessType"  color="#F87b1e">自助棋牌</radio>
            <radio class="radio-item" :value="0" :checked="0 === data.businessType"  color="#F87b1e">自助台球</radio>
            <!-- 其他业务选项... -->
          </radio-group>
        </view>
        <view class="form-item">
          <text class="form-label">4.意向开店城市</text>
          <input class="form-input" type="text" v-model="data.city" placeholder="请输入意向开店城市" />
<!--          <picker class="picker" mode="selector" :range="cities" v-model="selectedCity" range-key="name">-->
<!--            <view class="picker-view">-->
<!--              <text>{{ selectedCity.name }}</text>-->
<!--            </view>-->
<!--          </picker>-->
        </view>
        <view class="form-item">
          <text class="form-label">5.详细地址</text>
          <input class="form-input" type="text" v-model="data.address" placeholder="请输入详细地址" />
        </view>
        <view class="form-item">
          <text class="form-label">6.您的姓名</text>
          <input class="form-input" type="text" v-model="data.name" placeholder="请输入您的姓名" />
        </view>
        <view class="form-item">
          <text class="form-label">7.联系电话</text>
          <input class="form-input" type="text" v-model="data.phone" placeholder="请输入联系电话" />
        </view>
        <view class="form-item">
          <text class="form-label">8.留言建议</text>
          <textarea class="form-textarea" v-model="data.suggestions" placeholder="请输入您的建议或留言"></textarea>
        </view>
        <!-- 其他表单项... -->
        <view class="form-submit-btn" @click="handleSubmit">提交</view>
      </form>
    </view>
  </view>
</template>

<script>
import util from '@/libs/util.js'
export default {
  data() {
    return {
      data: {
        budget: '',
        businessType: 1,
        address: '',
        city: '',
        name: '',
        phone: '',
        suggestions: '',
        visited: 1,
      }
      // 其他数据...
    };
  },
  methods: {
    visitedChange(e) {
      console.log(e)
      this.data.visited = Number(e.detail.value)
    },
    businessTypeChange(e) {
      console.log(e)
      this.data.businessType = Number(e.detail.value)
    },
    handleSubmit() {
      // 处理表单提交逻辑
      console.log('Form submitted:', this.data);
      uni.showLoading({
        title: '提交中，请稍后'
      });
      let page = this
      if(!util.validatePhoneNumber(this.data.phone)){
        this.$Message.error("电话号码不规范，请重新输入")
        return;
      }
      this.$api.post('/joinUs/add',
          this.data
      ).then((response) => {
        if (response.ret === 1) {
          if (response.data === null || response.data === undefined || response.data === "ok") {
            uni.navigateTo({
              url: "/pages/tea/v2/index",
            });
          }
          uni.hideLoading();
        }
      });
    }
  }
};
</script>

<style lang="scss">
.container {

  background-color: #fff; /* 蓝紫色背景 */
  padding: 40rpx;
  color: #1f2226;
}

.form-container {
  background-color: rgba(255, 255, 255, 0.1); /* 半透明白色背景以突出表单 */
  border-radius: 10px;
  /* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); */
}

.form-header {
  margin-bottom: 20px;
  text-align: center;
}

.form-title {
  font-size: 20px;
  font-weight: bold;
}

.form-item {
  margin-bottom: 15px;
}

.form-label {
  display: block;
  font-size: 16px;
  margin-bottom: 20rpx;
}

.form-input,
.form-switch {
  display: block;
  width: 100%;
  padding: 10px;box-sizing: border-box;
  height: 80rpx;
  border-radius: 5px;
  border: 1rpx solid #999;
  background-color: #fff;
  color: #333;
}

.form-switch {
  margin-top: 5px;
}

.radio-group {
  margin-top: 5px;
}

.radio-item {
  margin-right: 10px;
}

.form-submit-btn {
 font-size:36upx;
 margin:0 auto;
background-color:$uni-theme-color;
 color:white;
 width:600upx;
 height:80upx;
 text-align: center;
 line-height: 80upx;
 border-radius: 40rpx;
}
</style>